<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script src="./js/jquery.min.js"></script>
    <script>
        /* JS的普通事件 */
        // btn.onclik = function(){}

        /* JQ的普通事件 */
        // $("button").click(function(){
        //     console.log("点我");
        // })
        
        /* JQ里面的普通事件 
                参数一  参数数
                参数二  函数(e)
        */
        // $("button").click({name:"文渊"},function(e){
        //     console.log("点我出事件",e.data.name);
        // })

        // $("button").dblclick(function(){
        //     console.log("你好!我是文渊");
        // })



        /* JQ有自己特有事件 hover*/
        $("button").hover(
            /* 鼠标移入 */
            function(){
                $(this).css({
                    "width":"100px",
                    "height":"100px",
                    "background":"red"
                })
            },
            /* 鼠标移出 */
            function(){
                $(this).css({
                    "width":"200px",
                    "height":"200px",
                    "background":"green"
                })
            }
        )

    </script>
</body>
</html>